<template>
  <view class="telLogin">
    <view class="telLogin_image">
      <image src="../../assets/img/logo_l.png" mode="widthFix"/>
    </view>
    <view class="telLogin_title">手机号登录</view>
    <view class="telLogin_content">
      <view class="telLogin_content_addressTel">+86</view>
      <view class="telLogin_content_box">
        <input v-model="tel" type="number" :focus="true"
               @input="inputChangeValue" class="telLogin_content_box_input" placeholder="请输入手机号码">
      </view>
      <view class="telLogin_content_delete" v-if="deleteTel">
        <button class="telLogin_content_delete_btn" v-on:click="inputValueDelete(1)">
          <i class="iconfont icon icon-shijianxuanze-shanchu- "></i>
        </button>
      </view>
    </view>
    <view class="telLogin_content">
      <view class="telLogin_content_box" :class="type">
        <input v-model="code" type="number" :focus="true" v-if="type == 'code'"
               @input="inputChangeValue" class="telLogin_content_box_input" placeholder="请输入验证码">
        <input v-model="password" type="number" :focus="true" v-if="type == 'password'"
               @input="inputChangeValue" :password="iconMark" class="telLogin_content_box_input" placeholder="请输入密码">
      </view>
      <view class="telLogin_content_delete" v-if="type == 'code' && deleteCode">
        <button class="telLogin_content_delete_btn" v-on:click="inputValueDelete(2)">
          <i class="iconfont icon icon-shijianxuanze-shanchu- "></i>
        </button>
      </view>
      <view class="telLogin_content_getCode" :class="type">
        <button v-on:click="codeClickMethod" class="telLogin_content_getCode_btn" :disabled="btnMark"
                v-if="type == 'code'">
          {{ codeText }}
        </button>
        <view v-else v-on:click="changeIcon">
          <i class="iconfont" :class="iconMark ? 'icon-yanjing_yincang' : 'icon-yanjing_xianshi'"></i>
        </view>
      </view>
    </view>
    <view class="telLogin_btn">
      <button type="primary" class="telLogin_btn_submit" v-on:click="login" :disabled="btnLoginMark">登录</button>
    </view>
    <view class="telLogin_type">
      <view class="telLogin_type_font">
        <view class="telLogin_type_font_part" v-on:click="changeMode()">
          <font v-if="type == 'password'">验证码登录</font>
          <font v-if="type == 'code'">账号密码登录</font>
        </view>
        <view class="telLogin_type_font_part" v-if="false">
          <font v-if="type == 'password'">忘记密码</font>
        </view>
      </view>
    </view>
    <view class="telLogin_foot">
      <view class="telLogin_foot_article">
        <view class="telLogin_foot_article_text">阅读</view>
        <view class="telLogin_foot_article_book" v-on:click="$navigateTo('/pages/system/privacy')">《隐私政策》</view>
        <view class="telLogin_foot_article_text">和</view>
        <view class="telLogin_foot_article_book" v-on:click="$navigateTo('/pages/system/serviceTreaty')">《服务协议》</view>
      </view>
      <view class="telLogin_foot_content">
        <view class="telLogin_foot_content_text">客服电话: 400-065-5799</view>
        <view class="telLogin_foot_content_text">工作时间: 9:30-18:30</view>
      </view>
    </view>
  </view>
</template>
<script>

export default {
  components: {},
  data() {
    return {
      needLogin: false,
      tel: null,
      //获取验证码标记
      btnMark: true,
      code: null,
      codeText: "获取动态验证码",
      closeEvent: null,
      password: '',
      //电话-删除标记
      deleteTel: false,
      //二维码-删除标记
      deleteCode: false,
      closeTime: 3,
      //登录按钮标记
      btnLoginMark: true,
      codeCountMark: true,
      oauthId: null,
      type: 'code',
      iconMark: true,
    }
  },
  methods: {
    /**
     * 更改input框 值
     * 判断几个功能性按钮 的显隐
     */
    inputChangeValue() {
      let self = this
      if (self.tel) {
        //有tel
        self.btnMark = false
        self.deleteTel = true
        if (self.code) {
          //有tel 有code
          self.deleteCode = true
          self.btnLoginMark = false
        } else {
          //有tel 无code
          self.btnLoginMark = true
        }
        if(self.password){
          self.btnLoginMark = false
        }
      } else {
        //无tel
        self.btnMark = true
        self.deleteTel = false
        self.btnLoginMark = true
        if (self.code) {
          //无tel 有code
          self.deleteCode = true
        } else {
          //无tel 无code
          self.deleteCode = false
        }
      }
    },
    /**
     * 更换登录模式
     */
    changeMode() {
      let self = this
      if (self.type == 'password') {
        self.type = 'code'
      } else {
        self.type = 'password'
      }
    },
    /**
     *密码显示替换Icon
     */
    changeIcon() {
      let self = this
      self.iconMark = self.iconMark == true ? false : true
    },
    /**
     * 登录
     */
    login() {
      let self = this
      if (!self.$utils.checkPhone(self.tel)) {
        uni.showToast({
          title: '请输入正确的手机号码',
          icon: 'none'
        })
        return
      }
      if (self.type == 'password') {
        self.$api.passwordLogin({
          mobile: self.tel,
          password: self.password,
        }).then(res => {
          self.changeTab(res)
          self.afterLogin(res)
          self.$isResolve()
        }).catch(res => {
          if (!res.data.res) {
            uni.showToast({
              title: '手机号或密码错误',
              icon: 'none'
            })
            return
          }
        })
      } else {
        self.$api.login({
          oauthId: self.oauthId,
          code: self.code,
        }, {
          loading: true,
          loadingLabel: ""
        }).then(res => {
          self.changeTab(res)
          self.afterLogin(res)
          self.$isResolve()
        }).catch(res => {
          if (!res.data.res) {
            uni.showToast({
              title: '手机号或验证码错误',
              icon: 'none'
            })
            return
          }
        })
      }

    },
    /**
     * 清空input框值
     */
    inputValueDelete(type) {
      let self = this
      if (type == 1) {
        self.tel = null
        self.inputChangeValue()
      } else {
        self.code = null
        self.inputChangeValue()
      }
    },
    /**
     *获取验证码点击事件
     */
    codeClickMethod() {
      let self = this
      if (!self.codeCountMark) {
        return
      }
      if (!self.$utils.checkPhone(self.tel)) {
        uni.showToast({
          title: '请输入正确的手机号码',
          icon: 'none'
        })
        return
      }
      self.codeCountMark = false
      self.$api.getTelCode({
        mobile: self.tel
      }, {
        loading: true,
        loadingLabel: "发送中...",
        successLabel: "发送成功"
      }).then(res => {
        self.oauthId = res.oauthId
        self.code = res.code
        self.getCode()
        self.inputChangeValue()
      }).catch(e => {
        self.btnMark = false
        self.codeCountMark = true
      })
    },
    /**
     * 获取code
     */
    getCode() {
      let self = this
      if (self.closeEvent) clearTimeout(self.closeEvent)
      self.clock = setTimeout(() => {
        self.closeTime = self.closeTime - 1
        self.codeText = self.closeTime + "秒后重新发送"
        if (self.closeTime < 0) {
          self.codeText = "重新发送验证码"
          self.closeTime = 3
          self.codeCountMark = true
        } else {
          self.getCode()
        }
      }, 1000)
    },
  }
}
</script>
<style>
page {
  background: #fff;
}
</style>
<style lang="scss" scoped>
.telLogin {
  .telLogin_top {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    background-color: #00aaff;
    font-size: 20px;
  }

  .telLogin_image {
    padding-left: 20px;
    padding-top: 100px;

    image {
      width: 200px;
    }
  }

  .telLogin_title {
    padding: 10px 20px 40px 20px;
    font-size: 22px;
    font-weight: bold;
  }

  .telLogin_content {
    display: flex;
    align-items: center;
    margin: 0px 20px 30px 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f6f6f6;
    height: 30px;
    font-size: 15px;

    .telLogin_content_addressTel {
      display: flex;
      align-items: end;
      justify-content: center;
      margin-right: 10px;
    }

    .telLogin_content_box {
      flex: 1;
      margin-right: 20px;

      &.password {
        margin-right: 10px;

        .telLogin_content_box_input {
          width: 100%;
          font-size: 15px !important;
        }
      }

      .telLogin_content_box_input {
        width: calc(100% - 40px);
        font-size: 15px !important;
      }
    }

    .telLogin_content_delete {
      width: 20px;

      .telLogin_content_delete_btn {
        color: #e5e5e5;
        background-color: #ffffff !important;

      }
    }

    .telLogin_content_getCode {
      width: 95px;
      margin-left: 10px;

      &.password {
        width: 20px;
      }

      .telLogin_content_getCode_btn {
        color: #00aaff !important;
        font-size: 13px !important;
        background-color: #ffffff;
      }
    }
  }

  .telLogin_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;

    .telLogin_btn_submit {
      width: calc(100% - 40px);
      border-radius: 5px !important;
    }
  }

  .telLogin_type {
    width: calc(100% - 40px);
    padding: 0 20px;

    .telLogin_type_font {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .telLogin_type_font_part{
        font{
          color: #00aaff;
          font-size: 14px;
        }
      }
    }
  }

  .telLogin_foot {
    position: fixed;
    bottom: 50px;
    width: 100%;

    .telLogin_foot_article {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      margin-bottom: 5px;

      .telLogin_foot_article_text {
        margin-right: 5px;
      }

      .telLogin_foot_article_book {
        color: #00aaff;

      }
    }

    .telLogin_foot_content {
      font-size: 12px;

      .telLogin_foot_content_text {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 5px;
        margin-bottom: 5px;
      }
    }
  }
}
</style>
